<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO</title>
    <style>
      body {
        margin: 0;
        padding-bottom: 3rem;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif;
      }
      #form {
        display: none;
      }
      #form2 {
        display: none;
      }
    </style>
  </head>

  <body>
    <div class="box-body">
      <div class="box-left">
        <div id="users" class="left-top">
          <button id="btn1">加入公共聊天房</button>
          <button id="btn3">加入开黑房1</button>
          <h3 id="chat-count">公共房人数: 加入后查看</h3>
          <h3 id="chat-count2">开黑房1人数: 加入后查看</h3>
          <div id="list">
            <span></span>
          </div>
          <button id="btn2">离开</button>
          <button id="btn4">离开开黑房1</button>
          <hr>
          <div>
            <!-- <button onclick="joinDraw()">Join Draw</button>
            <button onclick="leaveDraw()">Leave Draw</button> -->
          </div>
        </div>
        <div class="left-bottom">
          <ul id="messages"></ul>
        </div>
      </div>
    </div>
    <form id="form" action="">
      <input id="input" autocomplete="off" />
      <button>Send</button>
    </form>
    <form id="form2" action="">
      <input id="input2" autocomplete="off" />
      <button>Send Room</button>
    </form>
  </body>
  <script src="/socket.io/socket.io.js"></script>
  <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
  <script>
    const browser = getBrowser()

    function getBrowser () {
      const browser = {
        msie: false,
        firefox: false,
        opera: false,
        safari: false,
        chrome: false,
        netscape: false,
        appname: 'unknown',
        version: 0
      }
      const ua = window.navigator.userAgent.toLowerCase()
      if (/(msie|firefox|opera|chrome|netscape)\D+(\d[\d.]*)/.test(ua)) {
        browser[RegExp.$1] = true
        browser.appname = RegExp.$1
        browser.version = RegExp.$2
      } else if (/version\D+(\d[\d.]*).*safari/.test(ua)) {
        // safari
        browser.safari = true
        browser.appname = 'safari'
        browser.version = RegExp.$2
      }
      return browser.appname + ' ' + browser.version
    }

    // const socket = io()
    const socket = io("/chat")
    const onlineSocket = io('/online')
    const messages = document.getElementById('messages')
    const form = document.getElementById('form')
    const form2 = document.getElementById('form2')
    const input = document.getElementById('input')
    const input2 = document.getElementById('input2')
    const usersDiv = document.getElementById('users')
    const usersList = document.getElementById('list')
    const chatCount = document.getElementById('chat-count')
    const chatCount2 = document.getElementById('chat-count2')
    const onlineCount = document.getElementById('online-count')
    const id = browser
    const name = browser + '[' + returnCitySN.cip + ']'
    const btn1 = document.getElementById('btn1')
    const btn2 = document.getElementById('btn2')
    const btn3 = document.getElementById('btn3')
    const btn4 = document.getElementById('btn4')
    let room1 = ''

    // 进页面加入聊天室
    // socket.emit('join_chat', {
    //   userid: id,
    //   username: name
    // })
    btn1.onclick = function() {
      joinPublicChat()
    }

    btn2.onclick = function() {
      leavePublicChat()
    }

    btn3.onclick = function() {
      joinRoom1()
    }

    btn4.onclick = function() {
      leaveRoomChat()
    }

    function leavePublicChat() {
      socket.emit('chat:leave', {
        type: 'public'
      }, (msg) => {
        console.log('Leave Public Chat Callback: ', msg)
      }) 
    }

    function leaveRoomChat() {
      socket.emit('chat:leave', {
        type: 'room',
        room: {
          roomid: 1,
          roomname: '开黑房1'
        }
      }, (msg) => {
        console.log('Leave Room Chat Callback: ', msg)
      })  
    }

    function joinPublicChat () {
      const data = {
        type: 'public',
        user: {
          userid: Math.ceil(Math.random()*1000),
          username: getBrowser()
        }
      }
      socket.emit('chat:join', data, (msg) => {
        console.log('Join Public Chat Callback: ', msg)
        form.style.display = 'block'
      })
    }

    function joinRoom1() {
      const data = {
        type: 'room',
        user: {
          userid: Math.ceil(Math.random()*1000),
          username: getBrowser()
        },
        room: {
          roomid: 1,
          roomname: '开黑房1'
        }
      }
      socket.emit('chat:join', data, (msg) => {
        console.log('Join Room1 Chat Callback: ', msg)
        room1 = 'chat:msg:chat:room:1'
        addRoomListener(room1)
        form2.style.display = 'block'
      })
    }

    function addRoomListener(r) {
      socket.on(r, function (msg) {
      const item = document.createElement('li')
      item.textContent = msg.username + ': ' + msg.content
      messages.appendChild(item)
      window.scrollTo(0, document.body.scrollHeight)
    })
    }

    // 加入绘画房
    // function joinDraw () {
    //   socket.emit('join draw', {
    //     userid: id,
    //     username: name
    //   })
    // }

    // 离开绘画房
    // function leaveDraw () {
    //   socket.emit('leave draw', name)
    // }

    // 收到有新的人加入房间的信息
    // socket.on('draw_system', function (data) {
    //   usersCount.textContent = '绘画房: ' + data.count + '人'
    //   const users = data.users
    //   usersList.textContent = ''
    //   for (const u in users) {
    //     usersList.innerHTML += '<span>' + users[u] + '</span>'
    //   }
    //   alert(data.message)
    // })
    // 收到我离开的信息
    socket.on('leaveyou', function (data) {
      usersCount.textContent = 'online: 0'
      usersList.textContent = ''
      alert(data)
    })

    form.addEventListener('submit', function (e) {
      e.preventDefault()
      if (input.value) {
        socket.emit('chat:msg', {
          username: name,
          content: input.value
        })
        input.value = ''
      }
    })
    form2.addEventListener('submit', function (e) {
      e.preventDefault()
      if (input2.value) {
        console.log(22222, room1);
        socket.emit(room1, {
          username: name,
          content: input2.value
        })
        input2.value = ''
      }
    })
    socket.on('chat:msg', function (msg) {
      const item = document.createElement('li')
      item.textContent = msg.username + ': ' + msg.content
      messages.appendChild(item)
      window.scrollTo(0, document.body.scrollHeight)
    })

    // 监听聊天房系统通知
    socket.on('chat:system', function (res) {
      console.log('Chat System: ', res);
      if(res.type === 'public') {
        chatCount.textContent = '公共房人数: ' + res.count.value || 0
      } else if (res.type === 'room') {
        chatCount2.textContent = '开黑房1人数: ' + res.count.value || 0
      }
      const users = res.users
      usersList.innerHTML = ''
      let i = 0
      for (const u in users) {
        i++
        usersList.innerHTML += '<span>' + i + ' : ' + users[u].userid + ' : ' + users[u].username + ' </span><br>'
      }
    })
    onlineSocket.on('online:system', function (res) {
      console.log('Online System: ', res);
    })
  </script>
</html>
